<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的订阅</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/font/font-awesome.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/common/common.css">

<!-- Stylesheets -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/css/bootstrap-extend.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/assets/css/site.min.css">
<!-- Fonts -->
<!-- 网络图标 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/fonts/web-icons/web-icons.min.css">
<script src="<%=request.getContextPath() %>/v2/global/vendor/breakpoints/breakpoints.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script>
Breakpoints();
</script>
<style type="text/css">
.typcn {
	font-size: 16px;
}
	
</style>
</head>

<body class="my-bodyfix">
<div class="container">
	<div class="row">
	<div class="col-md-12">
		<div class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">服务器硬件健康监控:</h3>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-6">
						<div id="cpu-chart" style="height:400px;"></div>
					</div>
					<div class="col-md-6">
						<div id="ram-chart" style="height:400px;"></div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div id="disc-chart" style="height:400px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap/bootstrap.min.js"></script>
<script src="<%=request.getContextPath() %>/js/common/jutil.js"></script>
<script src="<%=request.getContextPath() %>/js/echart/echarts.min.js"></script>
<script src="<%=request.getContextPath() %>/js/echart/dark.js"></script>
<!-- ----------------Plugins -------->
<!-- ----------------Plugins end----->
<!-- Scripts -->
<script src="<%=request.getContextPath() %>/v2/global/js/core.js"></script>
<script src="<%=request.getContextPath() %>/v2/assets/js/site.js"></script>
<script src="<%=request.getContextPath() %>/v2/assets/js/sections/menubar.js"></script>

<script type="text/javascript">

(function(document, window, $) {
	'use strict';
	var Site = window.Site;
	$(document).ready(function() {
		Site.run();
	});
})(document, window, jQuery);

//获取折线图的公共选项
function getlineChartOption(){
	
	return	{
				tooltip : {
					trigger : 'axis',
					formatter : '时间:{b0} <br>使用率:{c0}%',
					position : function(pt) {
						return [ pt[0], '10%' ];
					}
				},
				title : {
					left : 'center',
					text : '标题',
				},
				legend : {
					top : 'bottom',
					data : [ '意向' ]
				},
				toolbox : {
					feature : {
						restore : {}
					}
				},
				xAxis : {
					type : 'category',
					boundaryGap : false,
					data : []
				},
				yAxis : {
					type : 'value',
					max : '100',
					min : '0',
					boundaryGap : [ 0, '100%' ]
				},
				dataZoom : [
						{
							type : 'inside',
							start : 0,
							end : 100
						},
						{
							start : 0,
							end : 10,
							handleIcon : 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
							handleSize : '80%',
							handleStyle : {
								color : '#fff',
								shadowBlur : 3,
								shadowColor : 'rgba(0, 0, 0, 0.6)',
								shadowOffsetX : 2,
								shadowOffsetY : 2
							}
						} ],
				series : [ {
					name : '单位:%',
					type : 'line',
					smooth : true,
					symbol : 'none',
					sampling : 'average',
					itemStyle : {
						normal : {
							color : 'rgb(255, 70, 131)'
						}
					},
					areaStyle : {
						normal : {
							color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
								offset : 0,
								color : 'rgb(255, 158, 68)'
							}, {
								offset : 1,
								color : 'rgb(255, 70, 131)'
							} ])
						}
					},
					data : []
				} ]
			};
}
	//cpu使用率折线图
	var cpuLine = echarts.init(document.getElementById('cpu-chart'),'dark');
	var cpuLineOption = getlineChartOption();
	cpuLineOption.title.text="cpu使用率";
	cpuLine.setOption(cpuLineOption);
	jutil.ajax({
		url:"/chart/device/server_info.action",
		data:{
			type : "cpu-usage"
		},
		success:function(data){
			// 填入数据
			cpuLine.setOption({
				xAxis : {
					type : 'category',
					boundaryGap : false,
					data : data.date
				},
				series: [{
					// 根据名字对应到相应的系列
					name: '销量',
					data: data.data
				}]
			});
			
		}
	})
	
	//内存使用率使用率折线图
	var ramLine = echarts.init(document.getElementById('ram-chart'),'dark');
	var ramLineOption = getlineChartOption();
	ramLineOption.title.text="内存使用率";
	ramLine.setOption(ramLineOption);
	jutil.ajax({
		url:"/chart/device/server_info.action",
		data:{
			type : "ram-usage"
		},
		success:function(data){
			// 填入数据
			ramLine.setOption({
				xAxis : {
					type : 'category',
					boundaryGap : false,
					data : data.date
				},
				series: [{
					// 根据名字对应到相应的系列
					name: '销量',
					data: data.data
				}]
			});
			
		}
	})
	//硬盘使用率折线图
	var discLine = echarts.init(document.getElementById('disc-chart'),'dark');
	var discLineOption = getlineChartOption();
	discLineOption.title.text="硬盘使用率";
	discLine.setOption(discLineOption);
	jutil.ajax({
		url:"/chart/device/server_info.action",
		data:{
			type : "disc-usage"
		},
		success:function(data){
			// 填入数据
			discLine.setOption({
				xAxis : {
					type : 'category',
					boundaryGap : false,
					data : data.date
				},
				series: [{
					// 根据名字对应到相应的系列
					name: '销量',
					data: data.data
				}]
			});
		}
	})
</script>
</body>

</html>
